<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="">
<meta name="description" content="">
<title>用户管理</title>
<link href="../../web-frame/layui/css/layui.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/bootstrap.min.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/font-awesome.min.css" rel="stylesheet"/>
<!-- bootstrap-table 表格插件样式 -->
<link href="../../web-frame/ruoyi/libs/bootstrap-table/bootstrap-table.min.css?v=20201129" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/animate.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/style.css?v=20200903" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/ruoyi/css/ry-ui.css?v=4.6.0" rel="stylesheet"/>
<script src="../../web-frame/ruoyi/js/jquery.min.js"></script>
<script src="../../web-frame/ruoyi/js/bootstrap.min.js"></script>
<!-- bootstrap-table 表格插件 -->
<script src="../../web-frame/ruoyi/libs/bootstrap-table/bootstrap-table.min.js?v=20201129"></script>
<script src="../../web-frame/ruoyi/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20201129"></script>
<script src="../../web-frame/ruoyi/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.min.js?v=20201129"></script>
<!-- jquery-validate 表单验证插件 -->
<script src="../../web-frame/ruoyi/libs/validate/jquery.validate.min.js"></script>
<script src="../../web-frame/ruoyi/libs/validate/messages_zh.min.js"></script>
<script src="../../web-frame/ruoyi/libs/validate/jquery.validate.extend.js"></script>
<!-- jquery-validate 表单树插件 -->
<script src="../../web-frame/ruoyi/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<!-- 遮罩层 -->
<script src="../../web-frame/ruoyi/libs/blockUI/jquery.blockUI.js"></script>
<script src="../../web-frame/ruoyi/libs/iCheck/icheck.min.js"></script>
<script src="../../web-frame/ruoyi/libs/layer/layer.min.js"></script>
<script src="../../web-frame/ruoyi/libs/layui/layui.js"></script>
<script src="../../web-frame/ruoyi/libs/layer/laytpl.js"></script>
<script src="../../web-frame/ruoyi/libs/layer/form.js"></script>
<script src="../../web-frame/ruoyi/ruoyi/js/common.js?v=4.6.0"></script>
<script src="../../web-frame/ruoyi/ruoyi/js/ry-ui.js?v=4.6.0"></script>
<body>

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            关键字查询：<input type="text" name="keyword"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="adduser()">
                <i class="fa fa-plus"></i> 新增用户
            </a>
            <a class="btn btn-primary" onclick="test()">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger" onclick="deleteData()">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="exportExcel()">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<div id="view"></div>
<script class="adduser" type="text/html">
    <form class="form-horizontal m" id="form-user-add">
        <div class="form-group">
            <input type="text" placeholder="请输入账号" name="username" class="form-control">
            <br>
            <input type="text" placeholder="请输入姓名" name="realname" class="form-control">
            <br>
            <input type="text" placeholder="请输入手机号" name="phone" class="form-control">
            <br>
            <input type="password" placeholder="请输入用户密码" name="password" class="form-control">
            <br>
            <input type="password" placeholder="请再次输入密码" name="againpassword" class="form-control">
            <br>
            <input type="text" placeholder="请再次输入住址" name="address" class="form-control">
            <br>
        </div>
    </form>
</script>
<!--添加角色-->
<script id="addrole" type="text/html">
    <form class="form-horizontal m" id="form-role-add">
        <li>
            角色选择：<select name="roieId">
                        <option value="">无</option>
                    {{#  layui.each(d.rolelist, function(index, item){ }}
                        <option value={{item.key}}>{{item.value}}</option>
                    {{#  }); }}
                    {{#  if(d.rolelist.length === 0){ }}
                        <option value=""> 无数据</option>
                    {{#  } }}
                    </select>
            &nbsp
            <a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="addUserRole({{d.userid}})">添加</a>
        </li>

    </form>
    <hr>
    <div class="layui-form">
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>角色名称</th>
                <th>角色编号</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {{#  layui.each(d.userroleList, function(index, item){ }}
                <tr>
                    <td>{{item.role_name}}</td>
                    <td>{{item.role_no}}</td>
                    <td>{{item.createDate}}</td>
                    <td><a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="removeRole( {{ item.id }} )">删除</a></td>
                </tr>
            {{#  }); }}
            </tbody>
        </table>
    </div>
</script>
<!--添加角色-->
<script id="updateuser" type="text/html">
    <div style="padding: 10px">
        <form class="layui-form layui-form-pane" id="update-user" action="">
            <input type="text" name="userId" value={{d.userId}} autocomplete="off" placeholder="请输入标题" hidden  class="layui-input" >
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" value={{d.phone}} autocomplete="off" placeholder="请输入标题"  class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="realname" value={{d.realname}} autocomplete="off" placeholder="请输入标题"  class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input type="text" name="username" value={{d.username}} autocomplete="off" placeholder="请输入标题"  class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" value={{d.address}} autocomplete="off" placeholder="请输入标题"  class="layui-input" >
                </div>
            </div>
        </form>
    </div>
</script>

<script>






    $(function() {
        var options = {
            url: "/user/getUserList",
            modalName: "菜单列表",
            columns: [{
                checkbox: true
            },
                {
                    title: '序号',
                    align: 'center',
                    halign: 'center',
                    width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页
                        var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                },
                {
                    field: 'phone',
                    title: '手机号'
                },
                {
                    field: 'realname',
                    title: '姓名'
                },
                {
                    title: '是否有效',
                    align: 'center',
                    width: 100,
                    formatter: function (value, row, index) {
                        var code=row.deleteStatus
                        var msg=''
                        if(code==0){
                            msg='有效'
                        }else {
                            msg='无效'
                        }
                        return msg;
                    }
                },
                {
                    field: 'address',
                    title: '地址'
                },
                {
                    field: 'createTime',
                    title: '创建时间'
                },
                {
                    title: '操作',
                    width: '20',
                    widthUnit: '%',
                    align: "left",
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="addRole(\'' + row.userId+ '\')">角色授权</a> ');
                        actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" onclick="updateUser(\'' + row.userId + '\')">修改</a> ');
                        actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="remove(\'' + row.userId + '\')">删除</a>');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });



    var num=0
    var tplContent;
    function laytemplate(obj,id) {
        var laytpl = layui.laytpl;
        var id=document.getElementById(id);
        if(num===0){
            tplContent=id.innerHTML;
            num++;
        }
        var tpl=tplContent;
        laytpl(tpl).render(obj, function(html){
            id.innerHTML = html;
       });

    }

    function exportExcel() {
        urldata('get','/user/import',undefined)
    }

    var num_update=0
    var tplContent_update;
    function laytemplateUpdate(obj,id) {
        var laytpl = layui.laytpl;
        var id=document.getElementById(id);
        if(num_update===0){
            tplContent_update=id.innerHTML;
            num++;
        }
        var tpl=tplContent_update;
        laytpl(tpl).render(obj, function(html){
            id.innerHTML = html;
        });

    }

    function addUserRole(obj) {
        var data= $("#form-role-add").serialize();
        data = decodeURIComponent(data,true);
        data=DataDeal.formToJson(data);
        var object=JSON.parse(data);
        var var_1=object.roieId
        if(var_1===''|| var_1===undefined){
            return layer.msg('未选择数据')
        }
        var formData=new FormData();
        formData.append("roieId",var_1);
        formData.append("userId",obj);
        var objdata=urlFromData('post','/role/addroleuser',formData)
        if(objdata.code===0){
            layer.close(addRole_index)
            layer.msg("添加成功");
        }
        addRole(obj)
    }

    var addRole_index
    var uid
    function addRole(obj) {
        RoleUserList(obj)
        uid=obj;
        addRole_index=layer.open({
            content: $('#addrole').html()
            ,area: ['600px', '450px'] //自定义文本域宽高
            ,title:'用户角色授权'
            ,type: 1
        });
    }

    function RoleUserList(obj) {
        var rolelist=urldata('post','/role/roleselect/'+obj,undefined)
        var userroleList=urldata('post','/role/getuserrole/'+obj,undefined)
        var data_1={};
        data_1.userid=obj;
        data_1.rolelist=rolelist.rows;
        data_1.userroleList=userroleList.rows;
        laytemplate(data_1,'addrole')
    }

    var updateUser_index
    function updateUser(obj) {
        var data=urldata('post','/user/getUerInfo/'+obj,undefined)
        data=data.rows;
        laytemplateUpdate(data,'updateuser')
        updateUser_index=layer.open({
            content: $('#updateuser').html()
            ,area: ['600px', '450px'] //自定义文本域宽高
            ,title:'用户信息修改'
            ,type: 1
            ,btn: ['确定', '取消']
            ,yes: function(){
                submitupdate(obj);
            }
            ,btn2: function(){
                //按钮【取消】的回调
                return 0;
            }
        });
    }

    function submitupdate(obj) {
        var data= $("#update-user").serialize();
        data = decodeURIComponent(data,true);
        data=DataDeal.formToJson(data);
        var obj=urldata('post','/user/updateUser',data)
        if(obj.code==0){
            layer.msg("修改成功")
        }
    }

    function removeRole(obj) {
        layer.confirm('您确定要删除这条数据吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            var data=urldata('post','/role/deleteroleuser/'+obj,undefined)
            if(data.code===0){
                layer.close(addRole_index)
                layer.msg('删除成功')
                addRole(uid);
            }
        })
    }



    function test() {
        laytemplate(data,'demo')
        layer.open({
            content: $('#demo').html()
            ,area: ['500px', '400'] //自定义文本域宽高
            ,title:'用户新增'
            ,btn: ['确定', '取消']
            ,yes: function(){
                submittestOrder();
            }
            ,btn2: function(){
                //按钮【取消】的回调
                return 0;
            }
        });
    }

    function submittestOrder() {
        var data= $("#form-test-add").serialize();
        data = decodeURIComponent(data,true);
        layer.msg(data)
    }



    //新增用户
    function adduser() {
        layer.open({
            content: $('.adduser').html()
            ,area: ['500px', '400'] //自定义文本域宽高
            ,title:'用户新增'
            ,btn: ['确定', '取消']
            ,yes: function(){
                submitOrder();
            }
            ,btn2: function(){
                //按钮【取消】的回调
                return 0;
            }
        });
    }

    function remove(obj) {
        layer.confirm('您确定要删除这条数据吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){
          layer.msg("删除成功");
          //刷新表单
          $('#bootstrap-table').bootstrapTable(('refresh'));
        })
    }

    //确认
    function submitOrder() {
        var data= $("#form-user-add").serialize();
        data = decodeURIComponent(data,true);
        data=DataDeal.formToJson(data);
        var data=urldata('post','/user/adduser',data);
    }


    var DataDeal = {
        //将从form中通过$('#refer').serialize()获取的值转成json
        formToJson: function (data) {
            data=data.replace(/&/g,"\",\"");
            data=data.replace(/=/g,"\":\"");
            data="{\""+data+"\"}";
            return data;
        }
    };

    function deleteData() {
        var obj= $("#bootstrap-table").bootstrapTable('getSelections');
        if(obj===''||obj===undefined){
            return layer.msg("请先选择一行数据");
        }
        layer.msg("要删除的数据"+JSON.stringify(obj))
    }

    function urldata(requestObject,url,data) {
        var token=localStorage.getItem('token');
        var data1='';
        $.ajax({
            type: requestObject,
            url: url,
            headers: {
                'Authorization': token,
                'Content-Type': 'application/json',
            },
            data:data,
            async:false,
            success: function(data) {
                data1=data;
            }
        })
        return data1
    }

    function urlFromData(requestObject,url,data) {
        var token=localStorage.getItem('token');
        var data1='';
        $.ajax({
            type: requestObject,
            url: url,
            headers: {
                'Authorization': token,
            },
            processData: false,
            contentType: false,
            dataType: "json",
            data:data,
            async:false,
            success: function(data) {
                data1=data;
            }
        })
        return data1
    }
</script>
</body>
</html>